import React from 'react';
import { Platform, StyleSheet, Text, View, Button, TextInput,FlatList,ScrollView } from 'react-native';

export default class App111 extends React.Component {
  constructor(props) {
	 super(props);
	 
	 this.state =  {
		inputText : '(没有输入内容)',
	 };
  }
  onPressLearnMore = () => {
     alert('按下了按钮');
  }
  onInputText = (val) => {
	this.setState({
	  inputText: val
	});
	console.log(val);
  }
  render() {
    return (
	<ScrollView>
      <View style={styles.container}>
        <Text>从App.js开始开发APP!(V0.1)</Text>
        <Text>修改自动加载！</Text>
        <Text>摇动手机，打开开发菜单.</Text>
		<Text>系统:{Platform.OS}</Text>
		<Text>{this.state.inputText}</Text>
		<TextInput
		  style={{height: 40, width: '100%', textAlign: 'center'}}
          placeholder="请输入内容"
		  onChangeText = {this.onInputText} 
		/>
        <FlatList
          data={[
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'James1'},
            {key: 'Joel1'},
            {key: 'John1'},
            {key: 'Jillian1'},
            {key: 'James2'},
            {key: 'Joel2'},
            {key: 'John2'},
            {key: 'Jillian2'},
            {key: 'James3'},
            {key: 'Joel3'},
            {key: 'John3'},
            {key: 'Jillian4'},
            {key: 'James4'},
            {key: 'Joel4'},
            {key: 'John4'},
            {key: 'Jillian5'},
            {key: 'Jimmy5'},
            {key: 'Julie5'},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
		<Button
		  style={{height: 40}}
		  title="Learn More"
		  onPress={this.onPressLearnMore}
		  color="#841584"
		  accessibilityLabel="Learn more about this purple button"
		/>
      </View>
	 </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
	  flex: 1,
    backgroundColor: '#fff',
	marginTop: 20,
	marginLeft: 20,
  },
});
